<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
  
</head>
<style>
  * {
    padding: 0;
    margin: 0;
  }
  body{
    width:100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  header{
    height: 100px;
    background-color: red;
    transform: translateX(-100%);
    animation: hd 1s forwards;
  }
  @keyframes hd {
    to{
      transform: translateX(0);
    }
  }
  main{
    flex:1;
    background-color:aqua;
    background: url('404.png') no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    animation: yanse 1s backwards;
  }
  @keyframes yanse {
    from{
      opacity: 0;
    }
    to{
      opacity: 1;
    }
  }
  div{
    width:50%;
    height: 30%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  div:nth-of-type(1){
    background: skyblue;
    margin-bottom: 20px;
    animation: div1 1s 1s backwards;
  }
  @keyframes div1 {
    from{
      transform:translate(-150%,-150%) scale(0)
    }
    to{
      transform:translate(0,0) scale(1) rotate(360deg)
    }
  }
  div:nth-of-type(2){
    background: red;
    animation: div1 1s 2s backwards;
  }
  @keyframes div2 {
    from{
      transform:translate(-150%,-150%) scale(0)
    }
    to{
      transform:translate(0,0) scale(1) rotate(360deg)
    }
  }
  footer{
    height: 100px;
    background-color:blueviolet;
    animation: footer 1s 3s backwards;
  }
  @keyframes footer {
    from{
      transform:scale(0)
    }
    to{
      transform:scale(1) rotate(360deg)
    }
  }
</style>
<body>
    <header></header>
    <main>
       <div>111111111111</div>
       <div>222222222222</div>
    </main>
    <footer></footer>
</body>
<script>
    

    
</script>
</html>
